<template>
	<view class="top-list">
			<view class="uni-tab-bar">
				
				<scroll-list-head :tabsList="tabs" :currentTab="currentTab" @changeTab="selectTab"></scroll-list-head>
				
				<swiper class="swiper-box" @change="selectSwiper" :current="currentTab">
					<swiper-item v-for="(topic,idx) in topicList" :key="idx">
						<template v-if="topic.list.length !== 0">
						<scroll-view scroll-y class="list" @scrolltolower="loadMore(idx)">
							<topic-tab v-for="(item,index) in topic.list" :topic="item.topic" :key="index"></topic-tab>
							<load-more :text="topic.loadtext"/>
						</scroll-view>
						</template>
						<template v-else>
							<no-msg></no-msg>
						</template>
					</swiper-item>
				</swiper>
				
			</view>
		</view>
</template>

<script>
	import scrollListHead from "../../components/scroll-list/scroll-list-head.vue"
	
	import TopicTab from "../../components/common/TopicTab.vue"
	
	import TopicData  from "../../common/mock/topicdata.js"
	
	import loadMore from "../../components/loadmore.vue"
	import NoMsg from "../../components/nomsg.vue"
	export default {
		data() {
			return {
				currentTab: 0,
				tabs: ["关注","关注","关注","关注","关注"],
				topicList : [{loadtext:"加载更多",list:TopicData.list},{loadtext:"加载更多",list:TopicData.list},{loadtext:"加载更多",list:TopicData.list},{loadtext:"加载更多",list:TopicData.list},{loadtext:"加载更多",list:TopicData.list},{loadtext:"加载更多",list:[]}]
			}
		},
		components:{
			scrollListHead,
			loadMore,
			NoMsg,
			TopicTab
		},
		methods: {
			selectTab(index){
				this.currentTab = index
			},
			selectSwiper(e){
				// console.log(this.currentTab)
				this.currentTab = e.detail.current
			},
			loadMore(idx){
				this.topicList[idx].loadtext = "加载中..."
				setTimeout(() => {
					this.topicList[idx].list.push({
							topic:{
								tImage : "../../static/test/head.png",
								tName: "一梦三年",
								tInfo: "安静森安静的斯科拉技术大咖建设靠大家爱丽丝",
								tNews: 881,
								tToday: 588
							}
						})
					this.topicList[idx].loadtext = "加载更多"
				},1000)		
			}
		}
	}
</script>

<style scoped>
	.top-list {
		height: 100vh;
	}
</style>
